import { Card, Form, Input, Space, Button } from "antd";
import { cleanObject } from "../../../utils/cleanObject";
import { SoapOpera } from "../../../Types/SoapOpera";

type onSearchProps = SoapOpera;

interface SearchFormProps {
    onSearch: (values: onSearchProps) => void;
    onReset: () => void;
}
export default function SearchForm(props: SearchFormProps) {
    function onFinish(values: onSearchProps) {
        props.onSearch(cleanObject(values));
    }
    return (
        <Card bordered={false}>
            <Form layout="inline" onFinish={onFinish} onReset={props.onReset}>
                <Space
                    style={{
                        justifyContent: "space-between",
                        display: "flex",
                        width: "100%",
                        flexWrap: "wrap",
                    }}
                >
                    <Space wrap>
                        <Form.Item<SoapOpera> name="title">
                            <Input placeholder="请输入剧名" />
                        </Form.Item>
                        <Form.Item<SoapOpera> name="type">
                            <Input placeholder="请输入类型" />
                        </Form.Item>
                        <Form.Item<SoapOpera> name="director">
                            <Input placeholder="请输入地区" />
                        </Form.Item>
                        <Form.Item<SoapOpera> name="year">
                            <Input placeholder="请输入年代" />
                        </Form.Item>
                        <Form.Item<SoapOpera> name="rating">
                            <Input placeholder="请输入评分" />
                        </Form.Item>
                    </Space>
                    <Space align="end">
                        <Space>
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                            <Button htmlType="reset">重置</Button>
                        </Space>
                    </Space>
                </Space>
            </Form>
        </Card>
    );
}
